<template>
  <div id="app">
    <div class="top">
      <div
        class="card"
        :class="{ highLight: (WhichIndex == index) }"
        v-for="(item, index) in cardArr"
        :key="index"
        @click="WhichIndex = index;componentId = item.componentId"
      >
        {{ item.componentName }}
      </div>
    </div>
    <div class="bottom">
        <keep-alive>
            <component :is="componentId"></component>
        </keep-alive>
    </div>
  </div>
</template>

<script>
import componentOneVue from './component-one.vue'
import componentTwoVue from './component-two.vue'
import componentThreeVue from './component-three.vue'
import componentFourVue from './component-four.vue'
export default {
  components: {
    componentOneVue,
    componentTwoVue,
    componentThreeVue,
    componentFourVue
  },
  data () {
    return {
      WhichIndex: 0,
      componentId: 'componentOneVue',
      cardArr: [
        {
          componentName: '动态组件table一',
          componentId: 'componentOneVue'
        },
        {
          componentName: '动态组件table二',
          componentId: 'componentTwoVue'

        },
        {
          componentName: '动态组件table三',
          componentId: 'componentThreeVue'

        },
        {
          componentName: '动态组件table四',
          componentId: 'componentFourVue'

        }
      ]
    }
  },
  created () {},
  mounted () {},
  methods: {}
}
</script>

<style scoped lang="scss">
#app {
  width: 100%;
  height: 100vh;
  box-sizing: border-box;
  padding: 20px;
  .top {
    width: 100%;
    height: 80px;
    display: flex;
    justify-content: space-around;
    .card {
      width: 15%;
      height: 80px;
      line-height: 80px;
      text-align: center;
      background-color: #fff;
      border: 1px solid #e9e9e9;
      border-radius:20px;
      font-size: 18px;
    }
    .highLight {
      box-shadow: 0 15px 30px rgba(0, 0, 0, 0.2);
      transform: translate3d(0, -1px, 0);
      background-color: red;
      color: #fff;
    }
  }
  .bottom {
    margin-top: 40px;

  }
}
</style>
